<template>
	<view class="container">
		<uni-forms ref="flowForm" :modelValue="formData" :rules="flowRules" class="form" label-width="120px">
			<uni-forms-item label="工单类别" required>
				<picker @change="bindTypeChange" :value="typeIndex" :range="typeOptions">
					<view class="uni-input">{{typeOptions[typeIndex]}}</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item label="资产分类" required v-if="typeInfo && typeInfo.code == 'purchase'">
				<picker @change="bindCateChange" @columnchange="bindColumnChange" mode="multiSelector" :value="cateIndex" :range="cateOptions">
					<view class="uni-input">{{cateName}}</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item label="采购数量" required v-if="typeInfo && typeInfo.code == 'purchase'">
				<uni-easyinput v-model="formData.amount" placeholder="请输入采购数量" />
			</uni-forms-item>
			<uni-forms-item label="申请资产" required v-if="typeInfo && typeInfo.code != 'purchase'">
				<picker @change="bindAssetChange" :value="assetIndex" :range="assetOptions">
					<view class="uni-input">{{assetName}}</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item label="单价" required v-if="typeInfo && typeInfo.isPrice == 'Y'">
				<uni-easyinput v-model="formData.price" placeholder="请输入采购单价/工单花费" />
			</uni-forms-item>
			<uni-forms-item label="申请原因" required>
				<uni-easyinput type="textarea" v-model="formData.reason" placeholder="请输入申请原因" />
			</uni-forms-item>
			<uni-forms-item label="申请说明">
				<uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入详细说明" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit('flowForm')">保存并提交</button>	
	</view>
</template>


<script>
	import { addFlow, selectFlowType } from '@/api/flow.js'
	import { queryDs } from '@/api/dataset.js'
	import { handleTree } from '@/utils/ruoyi.js'
	import { getInfo, selectInfo} from '@/api/asset.js'
	export default {
		data() {
			return {
				// 基础表单数据
				formData: {
					typeId: null,
					cateId: null,
					assetId: null,
					reason: '',
					content: '',
					price: 0,
					amount: null,
					flowStatus:'1'
				},
				typeOptions: [],
				typeList: [],
				typeIndex: 0,
				cateOptions: [],
				cateTree: [],
				cateIndex: [0, 0],
				cateId: null,
				typeInfo: null,
				assetOptions: [],
				assetList: [],
				assetIndex: 0,
				typeId: null,
				assetId: null,
				// 校验规则
				flowRules: {
					typeId: {
						rules: [{
							required: true,
							errorMessage: '工单类别不能为空'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '申请原因不能为空'
						}]
					}
				},
			}
		},
		onLoad() {			
			if(this.$route.query.assetId){
				this.assetId = this.$route.query.assetId;
				this.formData.assetId = this.$route.query.assetId;
				this.assetIndex = 0;
			}
			if(this.$route.query.typeId){
				this.typeId = this.$route.query.typeId;
				this.formData.typeId = this.$route.query.typeId;
			}
			
			selectFlowType({status: '1', id: this.formData.typeId}).then(response => {
				this.typeList = response.data;
				
				this.typeOptions = ['未选择'];
				for(let i=0;i<response.data.length;i++){
					this.typeOptions.push(response.data[i].name);
					if(this.formData.typeId && this.formData.typeId == response.data[i].id){
						this.typeIndex = i+1;
						this.typeInfo = response.data[i];
					}
				}
				
				if (this.typeInfo && this.typeInfo.code == 'purchase') {
					this.isPurchase = true;
					this.loadCategory();
				} else {
					this.isPurchase = false;
					this.loadAsset();
				}
			})
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.flowForm.setRules(this.flowRules)
		},
		computed: {
			cateName() {
				if(!this.cateId){
					return '未选择';
				}else { 
					return this.cateTree[this.cateIndex[0]].label + ' - ' + this.cateTree[this.cateIndex[0]].children[this.cateIndex[1]].label;
				}
			},
			assetName() {
				if(!this.formData.assetId || this.assetList.length == 0){
					return '未选择';
				}else { 
					return this.assetList[this.assetIndex].num + ' (' + this.assetList[this.assetIndex].cateName + ')';
				}
			},
		},
		methods: {
			bindTypeChange(e) {
				this.typeIndex = e.detail.value;
				this.typeInfo = this.typeList[e.detail.value-1];
				this.formData.typeId = this.typeInfo.id;
				if (this.typeInfo.code == 'purchase') {
					this.loadCategory();
				} else {
					this.isPurchase = false;
					this.loadAsset();
				}
			},
			bindColumnChange(e) {
				let {column,value} = e.detail;
				this.cateOptions[column] = value;
				if(column===0){//第一列改变
					this.cateIndex[0] = value;
					this.cateIndex[1] = 0;
					let treeData = {...this.cateOptions};
					this.flattenTree(this.cateTree, value);
				}else if(column===1){//第二列改变
					this.cateIndex[1] = value;
				}
			},
			bindCateChange(e) {
				console.log(e)
				this.formData.cateId = this.cateTree[e.detail.value[0]].children[e.detail.value[1]].id;
			},
			loadCategory() {
				this.formData.cateId = null;
				queryDs({
					code: 'base_category_tree'
				}).then(res => {
					this.cateTree = handleTree(res.data, 'id', 'pid')
					this.flattenTree(this.cateTree, 0);
				})
			},
			flattenTree(tree, col1) {				
				let treeData = [[],[]];
				for (let i = 0; i < this.cateTree.length; i++) {
					treeData[0].push(this.cateTree[i].label);
				}
				tree[col1].children.forEach(node => {
					treeData[1].push(node.label);
				});
				this.cateOptions = treeData;
				console.log(this.cateOptions)
			},
			bindAssetChange(e) {
				this.assetIndex = e.detail.value;
				this.formData.assetId = this.assetList[e.detail.value].id;
			},
			loadAsset() {
				this.assetIndex = 0;
				//this.formData.assetId = null;
				selectInfo({
					id: this.formData.assetId,
					inStore: 'Y',
					pageSize: 1000
				}).then(response => {
					this.assetOptions = response.data.map(e => {
						return e.num + ' (' + e.cateName +')';
					})
					this.assetList = response.data;
				});
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					addFlow(this.formData).then(response => {
						this.$modal.showToast('保存成功');
						this.$tab.redirectTo('/pages/flow/my');						
					});
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style>
	.form {
		padding: 15px;
		background-color: #fff;
	}
	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>